<template>
  <view class="cateContainer">
    <!-- 搜索组件 S-->
    <mySearch id="mySearch" v-if="searchShow"></mySearch>
    <!-- 搜索组件 E-->

    <!-- 容器区域 S -->
    <view class="boxContainer" :style="'height:'+(wh-searchHeight)+'px'">
      <!-- 左侧 S-->
      <scroll-view class="nav" scroll-y>
        <view  @click='changeActive(item)' v-for="item in cateList" :class="{ active:activeCate.id === item.id }" :key="item.id">{{item.name}}</view>
      </scroll-view>
      <!-- 左侧 E-->
      <!-- 右侧 S-->
      <view class="cate">
        <!-- 图片 -->
        <image class="cateImg" :src="activeCate.img_url">
        </image>
        <!-- 滚动商品容器 S-->
        <scroll-view  @scrolltolower="scrolltolower"  scroll-y class="listBox" :style="'height:'+(wh-searchHeight-imgHeight)+'px'">
          <!-- 商品列表 -->
          <goodList :list='list' v-if='list.length'></goodList>
          <!-- list有数据，才会展示底部，加载更多，加载中，没有了 -->
          <u-loadmore :status='status' v-if='list.length'></u-loadmore>
          <!-- 空的状态 -->
          <u-empty mode="list" v-else marginTop="200rpx"></u-empty>
        </scroll-view>
        <!-- 滚动商品容器 E-->
      </view>
      <!-- 右侧 E-->
    </view>
    <!-- 容器区域 E -->
  </view>
</template>

<script>
import loadmore from '../../uni_modules/uview-ui/libs/config/props/loadmore'
  export default {
    data() {
      return {
        // 控制搜索组件显示
        searchShow: false,
        wh: 0, // 窗口高度
        searchHeight: 0, // 搜索框的高度
        imgHeight: 0, // 分类图片高度
        cateList: [],
        activeCate: {},
        count: 0, // 总数
        currentPage: 1, // 页码
        pageSize: 8, // 每页数量
        list: [], // 商品列表
        status:"loadmore"//loadmore加载更多 loading加载中  nomore没有了
        
      }
    },
    methods: {
      // 左侧点击
      changeActive(row){
        this.activeCate=row//将点击的那一项的数据赋给activeCate
        // 重置
        this.list =[]
        this.status='loadmore'
        this.currentPage=1
        this.count=0
        // 拉取列表
        this.getGoodList()
      },
      // 滚动加载到底部
      scrolltolower(){
        if (this.status !== 'loadmore') return 
        this.currentPage++
        this.getAllCate()
      },
      async getAllCate() {
        const res = await uni.$http.get('/catalog/index')
        console.log(res)
        this.cateList = res.categoryList
        if (this.cateList.length) {
          const cateId = uni.getStorageSync('cateId')
          if (cateId){
            const row = this.cateList.find(item=>item.id===cateId)
            this.changeActive(row)
          }else {
            this.activeCate=this.cateList[0]
            this.changeActive(this.activeCate)
            // this.activeCate = this.cateList[0]//数组中第一项为默认项
            // this.getGoodList()
          }
         
        }
      },
      async getGoodList(){
    const res =    await uni.$http.post('/catalog/currentlist',{
          id:this.activeCate.id,
          page:this.currentPage,
          size:this.pageSize
        })
        console.log(res)
        this.count= res.count
        // this.list = res.data
        this.list.push(...res.data)//移动端滚动加载更多，列表都是追加数据
        // 追加到底部判断
        if(this.list.length === this.count){
          this.status='nomore'
        }else {
          this.status = 'loadmore'
        }
      }

    },
    onShow() {
      this.getAllCate()
      this.searchShow = true
    },
    onHide() {
      this.searchShow = false
      uni.removeStorageSync('cateId')
    },
    mounted() {
      uni.getSystemInfo({
        success: res => {
          this.wh = res.windowHeight
        }
      })
      //获取搜索组件高度
      const query = uni.createSelectorQuery().in(this);
      query.select('#mySearch').boundingClientRect(data => {
        this.searchHeight = data.height
      }).exec();
      // 获取图片高度
        query.select('.cateImg').boundingClientRect(data => {
            // data就是该节点的位置和高度相关信息
            this.imgHeight = data.height
        }).exec();
    }
  }
</script>

<style lang="scss">
  .cateContainer {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;

    .boxContainer {
      display: flex;
      flex: 1;

      .nav {
        width: 180rpx;
        border-right: 1rpx solid #fafafa;
        height: 100%;

        view {
          line-height: 100rpx;
          text-align: center;
          color: #333;
          font-size: 30rpx
        }

        .active {
          color: #409eff;
          font-size: 32rpx
        }
      }

      .cate {
        flex: 1;
        padding: 0 20rpx;
        height: 100%;
        flex-direction: column;

        .cateImg {
          width: 100%;
          height: 160rpx;
        }

        .listBox {
          flex: 1;
        }
      }
    }
  }
</style>
